<template>
  <div class="app-container">
    <header-search class="g-w100 g-h100 colon mainSearchPanel">
      <qjtitle :title="title"></qjtitle>
      <el-form ref="queryForm" :inline="true">
        <el-date-picker v-model="queryParams.sel_ny" type="date" format="yyyyMM" value-format="yyyyMM"
          placeholder="统计年月">
        </el-date-picker>
        <el-form-item label="部门">
          <el-select filterable clearable placeholder="请选择" v-model="queryParams.sel_ssbm">
            <el-option v-for="({ sjxdm, sjxmc }) in ssxl2" :key="sjxdm" :label="sjxmc" :value="sjxdm">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="姓名">
          <el-select filterable clearable placeholder="请选择" v-model="queryParams.sel_xm">
            <el-option v-for="({ sjxdm, sjxmc }) in ssxl1" :key="sjxdm" :label="sjxmc" :value="sjxdm">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="buttonArea">
          <el-button type="primary" icon="el-icon-search" @click="getListData">查询</el-button>
          <el-button icon="el-icon-refresh" class="commonBtn" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </header-search>

    <page-panel-new class="mainListPanel">
      <el-row class="mbBottom">
        <el-col :span="16">
          <el-button type="primary" @click="doExportExcel"> 导出 </el-button>
        </el-col>
      </el-row>
      <el-table ref="table-main" :data="zbdata" height="calc(100% - 113px)" :loading="bgLoading" border >
        <!-- 所属部门 姓名 工作序列 职务 持证数量 设备管理数量 国控科研 集团公司科研 分公司科研 院立科研 请假天数 迟到天数 早退天数 旷工天数  项目长 副项目长 主研 辅研 项目长 副项目长 主研 辅研 项目长副项目长主研辅研项目长副项目长 主研 辅研 当月完成样品分析任务 按时完成 未按时完成 提前完成 当月未完成数量 现场取样或分析完成次数  按时完成数量 未按时完成数 -->
        <el-table-column label="序号" type="index" width="50" />
        <el-table-column label="年月" align="center" prop="ny" show-overflow-tooltip width="180"  />
        <el-table-column label="类别" align="center" prop="lb" show-overflow-tooltip width="180"  />
        <el-table-column label="工作任务" align="center" prop="gzrw" show-overflow-tooltip width="180"  />
        <el-table-column label="任务状态" align="center" prop="rwzt" show-overflow-tooltip width="180"  />
        <el-table-column label="要求完成时间" align="center" prop="yqwcsj" show-overflow-tooltip width="180"  />
        <el-table-column label="任务完成时间" align="center" prop="rwwcsj" show-overflow-tooltip width="180"  />
        <el-table-column label="任务完成人" align="center" prop="rwwcr" show-overflow-tooltip width="180"  />
      </el-table>
      <qjfy :total='total' @fun="qjfyfun"></qjfy>
    </page-panel-new>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import {
  getListData,
  getSelectorData,
  submit,
  submit_delete,
  exportExcel
} from '@/api/syfxxtApi/zxrcsw/ryjxkhgztj/api.js'

import dayjs from 'dayjs'

export default Vue.extend({
  name: 'Zxrcsw-ryjxkhgztj',
  data() {
    return {
      keycz: 0, //附件上传key
      fileList: [],
      fileList_fj: [],
      title: '人员绩效考核工作统计', //页面标题
      dialogTitle: '', // 弹框标题
      bgLoading: false, // 表格加载状态
      Open1: false, //弹框状态
      zbdata: [], //主表格数据
      ssxl2: [], //查询选择器 下拉数据
      ssxl1: [], //查询选择器 下拉数据
      selectorData_in_fbdw: [], //录入选择器 下拉数据
      optype: '', //操作类型
      formData: {
        jcfzr: "",
        s_cjr_xm: "",
        sel_ny: "",
        jcwcrq: "",
        s_cjsj: "",
        jcfzr_xm: "",
        classid: "",
        filename: "",
        ryjxkhgztjlb: "",
        ryjxkhgztjmc: "",
        bz: "",
        id: "",
        fj_cnt: "",
        s_cjr: "",
        yqssrq: "",
        fileid: "",
      }, //录入Form数据
      formDisable: false, //表单禁用状态
      queryParams: {
        sel_ny: '',
        sel_ssbm: '',
        sel_xm: '',
        pageNum: 1,
        pageSize: 20,
      }, //查询参数
      total: 0,
    }
  },
  mounted() {
    this.getListData();
    this.getselectorData();
  },
  methods: {
    //获取 选择器数据
    getselectorData() {
      try {
        const param = {
          // 
        };
        getSelectorData("xm", param).then((res) => {
          if (res.success) {
            this.ssxl1 = res.rows;
          } else {
            this.ssxl1 = [];
          }
        })
        getSelectorData("ssbm", param).then((res) => {
          if (res.success) {
            this.ssxl2 = res.rows;
          } else {
            this.ssxl2 = [];
          }
        })
      } catch (error) {
        console.warn('接口提示', error);
      }
    },

    //获取主表格查询数据
    qjfyfun(e) {//分页
      this.queryParams.start = e.start;
      this.queryParams.limit = e.limit;
    },
    getListData() {
      try {
        this.bgLoading = true;
        getListData(this.queryParams).then((res) => {
          this.bgLoading = false;
          if (res.success) {
            this.zbdata = res.rows;
            this.total = res.total;
          } else {
            this.zbdata = [];
            this.$message.error({ content: '请重新搜索!', placement: 'center' });
          }
        }).catch((error) => {
          this.bgLoading = false;
          console.warn('接口提示', error);
        });
      } catch (error) {
        this.bgLoading = false;
        console.warn('接口提示', error);
      }
    },


    //查询参数重置按钮事件
    resetQuery() {
      this.queryParams = {
        sel_ny: null,
        sel_ssbm: '',
        sel_xm: '',
        pageNum: 1,
        pageSize: 20,
      }
      this.getListData();
    },



    //处理导出按钮事件
    doExportExcel() {
      var params = { ...this.queryParams };
      for (let key in params) {
        if (/^sel_/.test(key)) {
          var new_key = key.replace(/^sel_/, 'p_');
          params[new_key] = params[key];
        }
      }
      try {
        if (!this.queryParams) {
          this.$message.info({ content: '请先查询数据!', placement: 'center' })
        }
        const filename = this.title + '-' + dayjs().format('YYYYMMDDHHmmssSSS') + '.xls';
        exportExcel(this.download, params, filename);
      } catch (error) {
      }
    },
  },
})
</script>

<style lang="less" scoped>
.app-container {
  height: 100%;

  .el-table {
    overflow: scroll;
  }
}

::v-deep .el-dialog__body {
  max-height: 60vh;
  overflow-y: auto;
}

.delbutton {
  margin-right: 10px;
}

.mbBottom {
  margin-bottom: 10px;
}

.mainSearchPanel .page-header-title {
  font-size: 16px;
  color: #409EFF;
  font-weight: bolder;
  display: block;
  margin: 10px 0;
}
</style>
